项目技术栈：Vue + ant-design-vue

1. 分析打包结果

   • 借助 webpack-bundle-analyzer 分析打包出来的文件，都有什么成分组成

   ` // webpack.config.js const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

    new BundleAnalyzerPlugin()
   

   `

2. 给 ant-design-vue 瘦身

   • 借助 babel-plugin-import 实现 import 的按需加载
   • 结合官网指导，实现瘦身

   // .babelrc.js 'plugins': [ [ 'import', { 'libraryName': 'ant-design-vue', 'libraryDirectory': 'es', 'style': true } ] ]

3. 给 ant-design 的 icons 瘦身

   • 创建一个文件 antdIcon，按需引入图标 export { CaretDownOutline } from '@ant-design/icons' 问题是怎么知道该引用哪些图标呢？？？？？？ 根据实际使用了哪些图标，从@ant-design/icons/lib/dist中查找相应名称
   • webpack alias属性添加：{'@ant-design/icons/lib/dist$': path.resolve(__dirname, 'utils/antdIcon.js')}

4. 给 moment 瘦身

   • 借助 webpack 的内置插件 ContextReplacementPlugin(/moment[/\]locale$/, /zh-cn/)

5. 给 css 瘦身

   • purgecss-webpack-plugin

6. 代码拆分

   • webpack 内置的 splitChunks 功能

   optimization: { splitChunks: { vendors: { test: /[\\/]node_modules[\\/](vue|ant-design-vue)[\\/]/, name: 'vendors', chunks: 'all' } } }